<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/iconfont.css">

</head>
<body>
<!--导航栏-->
<div class="nav-top">
    <div class="nav">
        <div class="left">
            <a href="#">小米商城</a>
            <span>|</span>
            <a href="#">MIUI</a>
            <span>|</span>
            <a href="#">loT</a>
            <span>|</span>
            <a href="#">云服务</a>
            <span>|</span>
            <a href="#">天星数科</a>
            <span>|</span>
            <a href="#">小爱开放平台</a>
            <span>|</span>
            <a href="#">企业团购</a>
            <span>|</span>
            <a href="#">资质证照</a>
            <span>|</span>
            <a href="#">协议规则</a>
            <span>|</span>
            <a href="#">下载app</a>
            <span>|</span>
            <a href="#">智能生活</a>
            <span>|</span>
            <a href="#">Select Location</a>


        </div>

        <div class="right">
            <span class="iconfont icon-gouwuchekong"></span>
            <a href="#">购物车（0）</a>
        </div>
        <div class="middle">
            <a href="#">登录</a>
            <span>|</span>
            <a href="#">注册</a>
            <span>|</span>
            <a href="#">消息通知</a>

        </div>
    </div>
</div>
<!--导航头-->
<div class="main-mav-top">
    <div class="main-nav">
        <div class="mi-logo">
            <img src="./img/logo-mi.png" title="小米官网">
        </div>
        <div class="mi-product">
            <ul>
                <li class="li1">
                    <a href="#"></a>
                </li>
                <li>
                    <a href="#">
                        Xiaomi手机
                        <div>11</div>
                    </a>

                </li>
                <li>
                    <a href="#">Redmi红米
                        <div>11</div>
                    </a>
                </li>
                <li>
                    <a href="#">电视<div>11</div>
                    </a>
                </li>
                <li>
                    <a href="#">笔记本
                        <div>11</div>
                    </a>
                </li>
                <li>
                    <a href="#">平板
                        <div>11</div>
                    </a>
                </li>
                <li>
                    <a href="#">家电
                        <div>11</div>
                    </a>
                </li>
                <li>
                    <a href="#">路由器
                        <div>11</div>
                    </a>
                </li>
                <li>
                    <a href="#">服务
                        <div>11</div>
                    </a>
                </li>
                <li>
                    <a href="#">社区
                        <div>11</div>
                    </a>
                </li>
            </ul>

        </div>
        <div class="mi-find">
            <form action="#">
                <input type="text">
                <div>
                <button type="button" class="iconfont icon-search"></button>
                </div>
            </form>

        </div>
    </div>
</div>
<!--content-->
<div class="main-content">


    <div class="content">
        <ul>
                <li><img src="./img/lb-1.jpg" alt=""></li>
                <li><img src="./img/lb-2.webp" alt=""></li>
                <li><img src="./img/lb-3.webp" alt=""></li>
                <li><img src="./img/lb-1.webp" alt=""></li>
        </ul>
        <div class="list">
            <ul>
                <li class="l">
                    <span>手机</span>
                    <span>&gt;</span>
                    <div class="list1">
                        1
                    </div>
                </li>
                <li class="l">
                    <span>电视</span>
                    <span>&gt;</span>
                    <div class="list1">
                        2
                    </div>

                </li>
                <li class="l">
                    <span>笔记本 平板</span>
                    <span>&gt;</span>
                    <div class="list1">
                        3
                    </div>
                </li>
                <li class="l">
                    <span>家电</span>
                    <span>&gt;</span>
                    <div class="list1">
                        4
                    </div>
                </li>
                <li class="l">
                    <span>出行 穿戴</span>
                    <span>&gt;</span>
                    <div class="list1">
                        5
                    </div>
                </li>
                <li class="l">
                    <span>智能 路由器</span>
                    <span>&gt;</span>
                    <div class="list1">
                        6
                    </div>
                </li>
                <li class="l">
                    <span>电源 配件</span>
                    <span>&gt;</span>
                    <div class="list1">
                        7
                    </div>
                </li>
                <li class="l">
                    <span>健康 儿童</span>
                    <span>&gt;</span>
                    <div class="list1">
                        7
                    </div>
                </li>
                <li class="l">
                    <span>耳机 音响</span>
                    <span>&gt;</span>
                    <div class="list1">
                        9
                    </div>
                </li>
                <li class="l">
                    <span>生活 箱包</span>
                    <span>&gt;</span>
                    <div class="list1">
                        10
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--product-->
<div class="next-content">
    <div class="return">
        <ul>
            <li class="li1">
                <div>
                    <img src="./img/return/r1.png" alt="">
                    <p>保障服务</p>
                </div>
            </li>

            <li class="li2">
                <div>
                    <img src="./img/return/r2.png" alt="">
                    <p>企业团购</p>
                </div>
            </li>

            <li class="li3">
                <div>
                    <img src="./img/return/r3.png" alt="">
                    <p>F码通道</p>
                </div>
            </li>
            <li class="li4">
                <div>
                    <img src="./img/return/r4.png" alt="">
                    <p>米粉卡</p>
                </div>
            </li>
            <li class="li5">
                <div>
                    <img src="./img/return/r5.png" alt="">
                    <p>以旧换新</p>
                </div>
            </li>
            <li class="li6">
                <div>
                    <img src="./img/return/r6.png" alt="">
                    <p>话费充值</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="product">
        <div class="p1">
            <img src="./img/m1.jpg" alt="">
        </div>
        <div class="p2">
            <img src="./img/m2.jpg" alt="">
        </div>
        <div class="p3">
            <img src="./img/m3.jpg" alt="">
        </div>
    </div>
</div>
<!-- show -->
<div class="show">
    <div class="show-phone">
        <img src="./img/show.webp" alt="">
    </div>
    <!--手机-->
    <div class="phone">
        <ul>
            <li class="iphone">手机</li>
            <li class="mark">&gt;</li>
            <li class="show-more">查看更多</li>
        </ul>
    </div>

    <div class="phones">
        <div class="box1">
            <img src="./img/1.jpg" alt="">
        </div>
        <div class="box2">
            <ul>
                <li>
                    <img src="./img/2.jpg" alt="">
                </li>
                <li>
`                   <img src="./img/3.jpg" alt="">

                </li>
                <li>
                    <img src="./img/4.jpg" alt="">
                </li>
                <li>
                    <img src="./img/5.jpg" alt="">
                </li>
                <li>
                    <img src="./img/6.jpg" alt="">
                </li>
                <li>
                    <img src="./img/7.jpg" alt="">
                </li>
                <li>
                    <img src="./img/8.jpg" alt="">
                </li>
                <li>
                    <img src="./img/9.jpg" alt="">
                </li>
            </ul>
        </div>


        </div>
</div>

<!--智能穿戴-->
<div class="phone">
        <ul>
            <li class="iphone">智能穿戴</li>
            <li class="mark">&gt;</li>
            <li class="show-more">热门</li>

        </ul>
    </div>

<div class="phones">
        <div class="box1">
            <img src="./img/iwatch.webp" alt="">
        </div>
        <div class="box2">
            <ul>
                <li>
                    <img src="./img/sb1.webp" alt="">
                </li>
                <li>
`                   <img src="./img/sb2.webp" alt="">

                </li>
                <li>
                    <img src="./img/sb3.webp" alt="">
                </li>
                <li>
                    <img src="./img/sb4.webp" alt="">
                </li>
                <li>
                    <img src="./img/sb5.webp" alt="">
                </li>
                <li>
                    <img src="./img/sb6.webp" alt="">
                </li>
                <li>
                    <img src="./img/sb7.webp" alt="">
                </li>
                <div class="sb-li">
                    <div class="sb1">

                        <img src="./img/sb8.webp" alt="">
                    </div>
                    <div class="insert">

                    </div>
                    <div class="sb2">
                        <p>浏览更多>></p>
                    </div>
                </div>

            </ul>
        </div>


        </div>

<div class="phone">
        <ul>
            <li class="iphone">视频</li>
            <li class="mark">&gt;</li>
            <li class="show-more">查看更多</li>
        </ul>
    </div>
<div class="video">
    <div class="video-4">
        <div>
            <ul>
                <li>
                    <p class="vp1">
                        <img src="./img/vp1.webp" alt="">
                    </p>
                    <p class="vp2">2021春季新品发布会</p>
                </li>
                <li>
                    <p class="vp1">
                        <img src="./img/vp2.webp" alt="">
                    </p>
                    <p class="vp2">Redmi 10X系列发布会</p>
                </li>
                <li>
                    <p class="vp1">
                        <img src="./img/vp3.webp" alt="">
                    </p>
                    <p class="vp2">小米10 青春版 发布会</p>
                </li>
                <li>
                    <p class="vp1">
                        <img src="./img/vp4.webp" alt="">
                    </p>
                    <p class="vp2">小米10 8K 手机拍大片</p>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="video-b">
</div>

<!--  底部 -->
<div class="nav-bottom">
    <div class="bottom">
        <ul>
            <li class="b1"><span class="iconfont icon-buoumaotubiao46"></span>预约维修服务</li>
            <li class="b1"><span class="iconfont icon-7tiantuihuanhuo"></span>7天无理由退货</li>
            <li class="b1"><span class="iconfont icon-15tianwuliyoutuihuo"></span>15天免费换货</li>
            <li class="b1"><span class="iconfont icon-liwuhuodong"></span>满69包邮</li>
            <li class="b2"><span class="iconfont icon-zuobiao"></span>520余家售后网点</li>
        </ul>
    </div>
    <!--  2  -->
    <div class="bottom-nav">
        <div class="bottom-content">
            <dl>
                <dt>
                    <p>帮助中心</p>
                    <ul>
                        <li >账户管理</li>
                        <li>购物指南</li>
                        <li>订单操作</li>
                    </ul>
                </dt>
                <dt>
                    <p>服务支持</p>
                    <ul>
                        <li>售后支持</li>
                        <li>自助服务</li>
                        <li>相关下载</li>
                    </ul>
                </dt>
                <dt>
                    <p>线下门店</p>
                    <ul>
                        <li>小米之家</li>
                        <li>服务网点</li>
                        <li>授权体验店/专区</li>
                    </ul>
                </dt>
                <dt>
                    <p>关于小米</p>
                    <ul>
                        <li>了解小米</li>
                        <li>加入小米</li>
                        <li>投资者关系</li>
                        <li>企业社会责任</li>
                        <li>廉洁举报</li>
                    </ul>
                </dt>
                <dt>
                    <p>关注我们</p>
                    <ul>
                        <li>新浪微博</li>
                        <li>官方微信</li>
                        <li>联系我们</li>
                        <li>公益基金会</li>
                    </ul>
                </dt>
                <dt>
                    <p>特色服务</p>
                    <ul>
                        <li>F 码通道</li>
                        <li>礼物码</li>
                        <li>防伪查询</li>
                    </ul>
                </dt>

            </dl>

            <dl>
                <dt>
                    <p>4000-100-5678</p>
                    <p>8:00-18:00(仅收市话费)</p>
                    <p><span class="iconfont icon-xiaoxi"></span>人工客服</p>
                    <p>
                        关注小米:
                        <span class="iconfont icon-xinlangweibo"></span>
                        <span class="iconfont icon-weixin"></span>
                    </p>
                </dt>
            </dl>
        </div>
    </div>
    <!--  3  -->
    <div class="bottom-3">
        <div class="xm-logo">
            <img src="./img/logo-mi.png" alt="">
        </div>
        <div>
            <p>
                <a href="#">小米商城</a>
                <span>|</span>
                <a href="#">MIUI</a>
                <span>|</span>
                <a href="#">米家</a>
                <span>|</span>
                <a href="#">米聊</a>
                <span>|</span>
                <a href="#">多看</a>
                <span>|</span>
                <a href="#">游戏</a>
                <span>|</span>
                <a href="#">政企服务</a>
                <span>|</span>
                <a href="#">小米天猫店</a>
                <span>|</span>
                <a href="#">小米集团隐私政策</a>
                <span>|</span>
                <a href="#">小米公司儿童信息保护规则</a>
                <span>|</span>
                <a href="#">小米商城隐私政策</a>
                <span>|</span>
                <a href="#">小米商城用户协议</a>
                <span>|</span>
                <a href="#"> 问题反馈</a>
                <span>|</span>
                <a href=#">Select Location</a>
            </p>
            <p>
                <a href="#">北京互联网法院法律服务工作站</a>
                <span>|</span>
                <a href="#">中国消费者协会</a>
                <span>|</span>
                <a href="#">北京市消费者协会</a>
            </p>
            <p>
                <a href="">© mi.com 京ICP证110507号</a>
                <a href="">京ICP备10046444号</a>
                <a href=""> 京公网安备11010802020134号</a>
                <a href="">京网文[2020]0276-042号</a>
            </p>
            <p>
                <a href="">(京)网械平台备字（2018）第00005号</a>
                <a href="">互联网药品信息服务资格证(京)-非经营性-2014-0090</a>
                <a href=""> 营业执照</a>
                <a href=""> 医疗器械质量公告</a>
            </p>
            <p>
                <a href="">增值电信业务许可证</a>
                <a href="">网络食品经营备案 京食药网食备202010048 </a>
                <a href="">  食品经营许可证</a>
            </p>
            <p>
                <a href="">违法和不良信息举报电话：171-5104-4404</a>
                <a href="">知识产权侵权投诉</a>
                <a href="">本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</a>
            </p>

            <p class="p5">
                <a href="">
                    <img src="./img/p1.png" alt="">
                </a>
                <a href="">
                    <img src="./img/p2.png" alt="">
                </a>
                <a href="">
                    <img src="./img/p3.png" alt="">
                </a>
                <a href="">
                    <img src="./img/p4.png" alt="">
                </a>
                <a href="">
                    <img src="./img/p5.png" alt="">
                </a>
            </p>
        </div>
        <div>
            <p>让全球每个人都能享受科技带来的美好生活</p>
        </div>
    </div>
</div>

</body>
</html>